<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            font-family: "微软雅黑";
        }
        .goodsItem {
            width: 280px;
            height: 400px;
            float: left;
            border: 1px solid #ccc;
            margin: 5px;
        }
        #goods {
            width: 910px;
        }
        .goditem {
            list-style: none;
        }
        .godpic img {
            display: block;
            width: 250px;
            height: 250px;
            margin: 0px auto;
        }
        .godprice,
        .godinfo,
        .godadd {
            display: block;
            width: 220px;

            margin: 0px auto;

            text-align: center;

        }

        .godprice {

            font-size: 20px;

            color: #f00;

        }

        .godinfo {

            text-align: center;

            font-size: 14px;

            margin: 10px 0px;

        }

        .godadd a {

            display: block;

            width: 150px;

            height: 36px;

            background-color: #fd6a01;

            border-radius: 10px;

            margin: 0px auto;

            text-decoration: none;

            color: #fff;

            line-height: 36px;

        }

        #godcar {

            position: fixed;

            right: 0px;

            top: 40%;

            width: 72px;

            height: 64px;

        }

        #godcar .dnum {

            width: 24px;

            height: 24px;

            border-radius: 12px;

            background-color: #f00;

            text-align: center;

            line-height: 24px;

            position: absolute;

            font-size: 12px;

            top: 0px;

        }
        .godadd .bg {
            background-color: #808080;
        }
        </style>
</head>

<body>
    <p id="goods">

    <p class="goodsItem">

    <ul class="goditem">

        <li class="godpic"><img src="images/1.png"></li>

        <li class="godprice">￥25.00</li>

        <li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</li>

        <li class="godadd"><a href="javascript:;">加入购物车</a></li>

    </ul>

    </p>

    <p class="goodsItem">

    <ul class="goditem">

        <li class="godpic"><img src="images/2.png"></li>

        <li class="godprice">￥56.00</li>

        <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>

        <li class="godadd"><a href="javascript:;">加入购物车</a></li>

    </ul>

    </p>

    <p class="goodsItem">

    <ul class="goditem">

        <li class="godpic"><img src="images/3.png"></li>

        <li class="godprice">￥37.00</li>

        <li class="godinfo">用文字打败时间。冯唐最畅销作品，杂文才是其销量最好、最受欢迎的作品。</li>

        <li class="godadd"><a href="javascript:;">加入购物车</a></li>

    </ul>

    </p>

    <p class="goodsItem">

    <ul class="goditem">

        <li class="godpic"><img src="images/1.png"></li>

        <li class="godprice">￥25.00</li>

        <li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</li>

        <li class="godadd"><a href="javascript:;">加入购物车</a></li>

    </ul>

    </p>

    <p class="goodsItem">

    <ul class="goditem">

        <li class="godpic"><img src="images/2.png"></li>

        <li class="godprice">￥56</li>

        <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>

        <li class="godadd"><a href="javascript:;">加入购物车</a></li>

    </ul>

    </p>

    <p class="goodsItem">

    <ul class="goditem">

        <li class="godpic"><img src="images/3.png"></li>

        <li class="godprice">￥37.00</li>

        <li class="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</li>

        <li class="godadd"><a href="javascript:;">加入购物车</a></li>

    </ul>

    </p>

    </p>

    <p id="godcar">
    <p class="dnum">0</p>
    <p>
        <img src="images/car.jpg">
    </p>
    </p>
</body>

</html>

<!--data () {
    return {
      cartlist: [],
      checked: true, // 代表的全选是不是被选中
      testflag: true // 标识
    }
  },
  methods: {
    selectItem (item) {
      console.log(item)
      // 如果我当前点击的这个商品复选框是true，那么就去cartlist中去查询
      // 将every遍历的结果赋给全选框
      updateItemFlag({
        cartid: item.cartid,
        num: item.flag ? 1 : 0
      }).then(() => {
        if (item.flag) {
          const val = this.cartlist.every(item => {
            return item.flag
          })
          this.checked = val
          this.testflag = val
        } else {
        // 如果我当前点击的商品复选框是false,那么就直接将全选框设为false
          this.checked = false
          this.testflag = false
        }
      })
    },
    selectAll (event) {
      // console.log(event)
      // 每次点击都会切换标识
      this.testflag = !this.testflag
      // 选中的状态和标识一致
      this.checked = this.testflag
      console.log(this.checked)
      updataAllFlag({
        userid: localStorage.getItem('userid'),
        num: this.checked ? 1 : 0 // 后端接收的状态是number类型
      }).then(res => {
        // 前端效果的更新 - 全选选中，则全部选中，全选不选中，则全部不选中
        this.cartlist.map(item => {
          // 双向绑定，数据改变自动渲染view层
          item.flag = this.checked
        })
      })
    },
    onSubmit () {
      console.log('提交订单')
    },
    changeNum (value, detail) {
      console.log(value, detail)
      updateCart({
        cartid: detail.name,
        num: value
      }).then(res => {
        // 更新成功
      })
    },
    deleteItem (item, index) {
      Dialog.confirm({
        message: '亲，便宜不等人，请三思而行'
      }).then(() => {
        // on confirm
        deleteCart({
          cartid: item.cartid
        }).then(res => {
          // 删除之后更新列表数据
          this.cartlist.splice(index, 1)
          // 删除完数据，计算属性具有依赖性，删除数据时，原数据发生改变
          // 计算属性重新计算
          // if (this.cartlist.length === 0) {
          //   Toast('购物车空空如也')
          //   this.flag = true
          // } else {
          //   this.flag = false
          // }
        })
      }).catch(() => {
        // on cancel
      })
    }
  },
  computed: {
    totalNum () {
      return this.cartlist.reduce((sum, item) => {
        return item.flag ? sum + item.num : sum + 0
      }, 0)
    },
    totalPrice () {
      return this.cartlist.reduce((sum, item) => {
        return item.flag ? sum + item.num * item.price : sum + 0
      }, 0)
    },
    lenFlag () {
      if (this.cartlist.length === 0) {
        return true
      } else {
        return false
      }
    }
  },
  mounted () {
    getCartData({ userid: localStorage.getItem('userid') }).then(res => {
      // if (res.data.data.length === 0) {
      //   Toast('购物车空空如也')
      //   this.flag = true
      // } else {
      //   console.log(res.data.data)
      //   this.cartlist = res.data.data
      //   this.flag = false
      // }
      this.cartlist = res.data.data
      // console.log(111)
      // console.log(res.data.data)
      const val = this.cartlist.every(item => {
        return item.flag
      })
      this.checked = val
      this.testflag = val
    })
  }